<template>
  <!--信用公示-->
  <div class="container">
    <div class="searchCon">
      <div class="title">务工人员不良记录</div>
      <div class="search">
        <el-form
          :model="filterField"
          label-width="205px"
          :rules="formRules"
          ref="filterField"
          class="form"
        >
          <el-row class="row-padding-bottom">
            <el-col :span="12" class="col-position">
              <el-form-item label="人员姓名">
                <el-input
                  v-model="filterField.name"
                  placeholder="请输入人员姓名"
                  @blur="filterField.name = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position">
              <el-form-item label="身份证号">
                <el-input
                  v-model="filterField.idcard"
                  placeholder="请输入身份证号"
                  @blur="filterField.idcard = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="buttonBox">
        <el-button class="commonBut saveBtn" @click="search" v-sdc
          >搜索</el-button
        >
      </div>
    </div>
    <div class="searchResult">
      <div class="secondLevelTitleStyle">查询结果</div>
      <div class="searchResultTable">
        <div class="number">查询人员存在{{ total }}条不良记录</div>

        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            align="center"
            prop="name"
            label="人员姓名"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="companyName"
            label="发生单位"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                v-if="scope.row.projectId"
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
              <copyText
                v-else
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="occurrenceDate"
            label="发生时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            width="110px"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.$index, scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="tableData.length < 1">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
      </div>
      <!-- 详情弹窗 -->
      <el-dialog
        title="不良记录详情"
        :visible.sync="formVisible"
        :close-on-click-modal="false"
        :show-close="true"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <recordDetail :detailData="detailData" type="BAD"></recordDetail>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import recordDetail from '@/components/worker/recordDetail'
export default {
  name: 'newCreditPublicity',
  components: {
    recordDetail,
  },
  data() {
    return {
      filterField: {
        name: '',
        idcard: '',
        type: 'BAD',
      },
      total: '',
      tableData: [],
      requestUrl: 'api-r/employee/creditrecord/findEmployeeCreditByIdcard',
      loading: false,
      formVisible: false,
      detailData: {},
    }
  },
  created() {},
  methods: {
    search() {
      if (!this.filterField.name || !this.filterField.idcard) {
        this.$message({
          message: '请输入姓名和身份证号查询',
          type: 'warning',
        })
        return
      }
      this.loading = true
      this.axios({
        method: 'post',
        url: this.requestUrl,
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.tableData = response.data.result
            this.total = this.tableData.length
            this.loading = false
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((response) => {})
    },
    toDetail(index, row) {
      this.getDetail(row)
    },
    getDetail(row) {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/detail',
        data: { id: row.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.detailData = response.data.result
            this.formVisible = true
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
  },
}
</script>
<style scoped lang="less">
.searchCon {
  background-color: #fff;
  margin-bottom: 10px;
  margin-top: 24px;
  padding: 0 24px;
  padding-bottom: 36px;
  .title {
    padding: 32px 0;
    font-size: 24px;
    color: #000;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid #f4f4f4;
  }
}

.search {
  background: #f4f4f4;
  height: 75px;
  line-height: 75px;
  margin-top: 24px;
  .el-form-item {
    margin-bottom: 0;
  }
  /deep/.el-form-item__label,
  /deep/.el-form-item__content {
    line-height: 75px;
  }
  /deep/.el-input {
    width: 65%;
  }
}

.buttonBox {
  text-align: center;
  margin-top: 24px;
}

.searchResult {
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 24px;
  .secondLevelTitleStyle {
    margin: 0;
  }
  .number {
    margin: 10px 0;
    color: #333;
  }
  .searchResultTable {
    padding: 0 16px;
  }
}
</style>
